<template>
  <div>
    <a-form :form="form" style="max-width: 500px; margin: 40px auto 0;" :label-col="labelCol" :wrapper-col="wrapperCol">
      <a-row>
        <a-col >
          <a-form-item label="个人照片" aria-required="true">
            <j-image-upload :disabled="isdisabledF" v-decorator="['professorPhotoString',{rules: [{ required: true, message: '请上传个人照片', trigger: 'blur' }]}]" ></j-image-upload>
          </a-form-item>
        </a-col>
      </a-row>
      <a-row>
        <a-col>
          <div>
            <a-form-item label="申请表照片" aria-required="true">
              <j-image-upload :disabled="isdisabledF" v-decorator="['professorInfoPhotoString',{rules: [{ required: true, message: '请上传申请表照片', trigger: 'blur' }]}]" ></j-image-upload>
            </a-form-item>
          </div>
        </a-col>
      </a-row>
      <a-row>
        <a-col>
          <div>
            <a-form-item label="身份证复印件" aria-required="true">
              <j-image-upload :disabled="isdisabledF" v-decorator="['professorIdString',{rules: [{ required: true, message: '请上传身份证复印件', trigger: 'blur' }]}]" ></j-image-upload>
            </a-form-item>
          </div>
        </a-col>
      </a-row>
      <a-row>
        <a-col>
          <div>
            <a-form-item label="个人承诺书" aria-required="true">
              <j-image-upload :disabled="isdisabledF" v-decorator="['professorCommitmentString',{rules: [{ required: true, message: '请上传个人承诺书', trigger: 'blur' }]}]" ></j-image-upload>
            </a-form-item>
          </div>
        </a-col>
      </a-row>
      <a-row>
        <a-col>
          <div>
            <a-form-item label="个人工作简历" aria-required="true">
              <j-image-upload :disabled="isdisabledF" multiple isMultiple showUploadList  v-decorator="['professorResumeString',{rules: [{ required: true, message: '请上传个人工作简历', trigger: 'blur' }]}]" ></j-image-upload>
            </a-form-item>
          </div>
        </a-col>
      </a-row>
      <a-row>
        <a-col>
          <!--          <a-col :span="6" style="position: absolute; left: 75% ">-->
          <div>
            <a-form-item label="学历、学位证书复印件" aria-required="true">
              <j-image-upload :disabled="isdisabledF" multiple isMultiple showUploadList  v-decorator="['professorDegreeImageString',{ rules: [
              { required: true, message: '请上传学历、学位证书复印件' },
              { validator: checkPositiveInteger2 }]
              }]" ></j-image-upload>
            </a-form-item>
          </div>
        </a-col>
      </a-row>
      <a-row>
        <a-col>
          <div>
            <a-form-item label="专业资格职业证书复印件" aria-required="true">
              <j-image-upload :disabled="isdisabledF" multiple isMultiple showUploadList  v-decorator="['professorQualificationString',{ rules: [
              { required: true, message: '请上传专业资格职业证书复印件' },
              { validator: checkPositiveInteger2 }]
              }]"></j-image-upload>
            </a-form-item>
          </div>
        </a-col>
      </a-row>
      <a-row>
        <a-col>
          <div>
            <a-form-item label="其他证明专业能力的材料" aria-required="true">
              <j-image-upload :disabled="isdisabledF" :multiple="true" isMultiple showUploadList  v-decorator="['professorOtherString',{ rules: [
              { required: true, message: '请上传其他证明专业能力的材料' },
              { validator: checkPositiveInteger2 }]
              }]"></j-image-upload>
            </a-form-item>
          </div>
        </a-col>
      </a-row>
      <a-form-item :wrapperCol="{span: 19, offset: 5}">
        <div style="display: flex;justify-content: space-between;align-content: center">
          <div>
            <a-button type="primary" @click="handleOk" :disabled="isdisabledF">提交</a-button>
            <a-modal
               :closable="false"
              :visible="isShow"
              title="温馨提示"
            >
              <p>{{ modalText }}</p>
              <template slot="footer">
                <a-button @click="handleOkss" style="background-color: #93adff;color: white">关闭</a-button>
              </template>
            </a-modal>
          </div>
          <a-button type="primary"  @click="prevStep">上一步</a-button>
        </div>
      </a-form-item>
    </a-form>
  </div>
</template>

<script>
  import JDate from '@/components/jeecg/JDate'
  import JCategorySelect from '@/components/jeecg/JCategorySelect'
  import JTreeSelect from '@/components/jeecg/JTreeSelect'
  import JAreaLinkage from '@comp/jeecg/JAreaLinkage'
  import ATextarea from "ant-design-vue/es/input/TextArea";
  import { httpAction } from '@/api/manage'
  import {downloadFile} from '@/api/manage'
  // 导入
  import {getAction} from '@/api/manage'
  import JImageUpload from '@/components/jeecg/JImageUpload'
  import ACol from "ant-design-vue/es/grid/Col";
  function getBase64(img, callback) {
    const reader = new FileReader();
    reader.addEventListener('load', () => callback(reader.result));
    reader.readAsDataURL(img);
  }
  export default {
    name: "Step3",
    components: {
      ACol,
      ATextarea,
      JAreaLinkage,
      JImageUpload,
      JCategorySelect,
      JDate,
      JTreeSelect,
      downloadFile
    },
    data () {
      return {
        modalText:"您的信息已受理，请等待审核结果，届时会有短信提示!",
        labelCol: { span: 4 },
        wrapperCol: { span: 14 },
        isdisabledF:false,
        marjorId:"",
        form:this.$form.createForm(this),
        schoolId:"",
        clickCount:0,
        imageUrl: '',
        fieldvalue:{
          professorPhotoString:'',
          professorInfoPhotoString:'',
          professorIdString:'',
          professorCommitmentString:'',
          professorResumeString:'',
          professorDegreeImageString:'',
          professorQualificationString:'',
          professorOtherString:'',
        },
      }
    },
    props:{
      isShow:{
        default: false,
        type:Boolean
      },
      tes:{
        default:{},
        type: Object
      }
    },
    created(){
      this.selectisdiabaled();
    },
    mounted(){
      this.form.setFieldsValue({
        professorPhotoString:this.tes.professorPhotoString,
        professorInfoPhotoString:this.tes.professorInfoPhotoString,
        professorIdString:this.tes.professorIdString,
        professorCommitmentString:this.tes.professorCommitmentString,
        professorResumeString:this.tes.professorResumeString,
        professorDegreeImageString:this.tes.professorDegreeImageString,
        professorQualificationString:this.tes.professorQualificationString,
        professorOtherString:this.tes.professorOtherString,
      });
    },
    methods: {
      handleOkss(){
        location.reload();
        this.isShow=false;
      },
      selectisdiabaled(){
        getAction("/temporary/diyTemporaryApplicantInfo/selectIsdisabledByuserid").then((res) => {
          if(res.result==1){
            this.clickCount=2;
            return this.isdisabledF=true;
          }
        })
      },
      getfieldvalue(){
        const that = this;
        this.form.validateFields((err, values) => {
          // 获取表单中type的id
          this.fieldvalue.professorPhotoString = that.form.getFieldValue("professorPhotoString");
          this.fieldvalue.professorInfoPhotoString = that.form.getFieldValue("professorInfoPhotoString");
          this.fieldvalue.professorIdString = that.form.getFieldValue("professorIdString");
          this.fieldvalue.professorCommitmentString = that.form.getFieldValue("professorCommitmentString");
          this.fieldvalue.professorResumeString = that.form.getFieldValue("professorResumeString");
          this.fieldvalue.professorDegreeImageString = that.form.getFieldValue("professorDegreeImageString");
          this.fieldvalue.professorQualificationString = that.form.getFieldValue("professorQualificationString");
          this.fieldvalue.professorOtherString = that.form.getFieldValue("professorOtherString");
        })
      },
      handleOk(){
        this.getfieldvalue();
        console.log(this.fieldvalue);
        if((Object.keys(this.fieldvalue).filter(v=>!this.fieldvalue[v]).length<=0)){
        this.$emit('setfiled2',this.fieldvalue);
        this.$emit('HandleOk');
        this.$message.success("提交成功！")
        }else{
          this.$message.error("请仔细检查是否有未填写项！")
        }

      },
      prevStep () {
        this.getfieldvalue();
        if((Object.keys(this.fieldvalue).filter(v=>!this.fieldvalue[v]).length<=0)){
        this.$emit('prevStep')
        this.$emit('setfiled2',this.fieldvalue);
        }else{
          this.$message.error("请仔细检查是否有未填写项！")
        }
      },
      checkPositiveInteger2(rule, value, callback){
        const array = value.split(",");
        console.log(value)
        const size = Array.from(array).length;
        console.log(size)
        if ( size<=9) {
          // 如果需要返回 error msg，就把它传给 `callback()`
          callback();
        }
        else {
          // 如果通过校验，调用无参数的 `callback()` 即可
          callback('请提交9个以内的图片');
        }
      },
    }
  }
</script>
<style lang="less" scoped>
  .information {
    line-height: 22px;

    .ant-row:not(:last-child) {
      margin-bottom: 24px;
    }
  }
  .money {
    font-family: "Helvetica Neue",sans-serif;
    font-weight: 500;
    font-size: 20px;
    line-height: 14px;
  }
</style>